<template>
  <div>
    <!-- 批量导入 -->
    <a-button type="primary" icon="plus" style="margin-bottom: 31px;" @click="uploadShow=true">
      批量导入
    </a-button>

    <!-- 批量导入弹窗 -->
    <a-modal
        centered
        class=""
        title="批量导入"
        :visible="uploadShow"
        :confirm-loading=false
        okText="上传"
        cancelText="取消"
        @ok="uploadOk"
        @cancel="uploadCancel"
    >

      <el-upload
          class="upload-demo"
          :action="uploadUrl()"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :before-upload="beforeUpload"
          multiple
          ref="upload"
          :limit="1"
          :on-exceed="handleExceed"
          :on-success="handleSuccess"
          :file-list="fileList">
        <span><i style="color:rgba(221,0,0,1)">*</i>导入文件：</span>
        <a-button><i class="iconfont iconupload"></i>上传文件</a-button>
        <div slot="tip" class="el-upload__tip" style="padding-left: 77px;font-size: 14px;">
          只支持excel格式文件，文件大小需小于15M。
        </div>
      </el-upload>

    </a-modal>

    <!-- 表格 -->
    <el-table
        class="table"
        v-loading="tableLoading"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: auto"
        height="500"
        :row-key="getRowKey"
        @selection-change="changeStatus($event)"
        @row-click="clickRow">
      <el-table-column type="selection" width="55" :reserve-selection="true"
                       :selectable='selectInit'></el-table-column>
      <el-table-column type="index" label="序号" width="55" :index="1"></el-table-column>

      <el-table-column prop="serialId" label="序列号" width="200" show-overflow-tooltip></el-table-column>
      <el-table-column prop="ip" label="IP地址" width="" show-overflow-tooltip></el-table-column>
      <el-table-column prop="model" label="型号" width="" show-overflow-tooltip></el-table-column>
      <el-table-column prop="mac" label="MAC地址" width="" show-overflow-tooltip></el-table-column>
      <el-table-column prop="moduleId" label="短号" width="" show-overflow-tooltip></el-table-column>
      <el-table-column prop="vmPort" label="端口" width="" show-overflow-tooltip></el-table-column>
      <el-table-column prop="hwVer" label="软件版本" width="" show-overflow-tooltip></el-table-column>
      <el-table-column prop="fileModified" label="	归档时间" width="" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.fileModified | getDate }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="">
        <template slot-scope="scope">
          <a-button v-if="scope.row.length!==0" style="padding: 0;margin-right: 12px;" type="link"
                    @click.stop="editClick(scope.row)">编辑
          </a-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑表单 -->
    <edit-form
        :editShow="editShow"
        :editFormId="editFormId"
        :editFormSn="editFormSn"
        :editFormPoint="editFormPoint"
        @isShow="showChange"
        @getTable="getTable"></edit-form>

  </div>
</template>

<script>
import editForm from '@/components/editForm/editForm';

export default {
  name: 'pointTable',
  computed: {
    newIsChecked() {
      let c = this.tools.deepClone(this.isCheckedList);
      let checkedList = [];
      c.forEach(item => {
        checkedList.push(item.id);
      });
      return checkedList;
    }
  },
  data() {
    return {
      // 批量导入弹窗显隐
      uploadShow: false,
      // 表格数据
      tableData: [],
      // 表格加载
      tableLoading: false,
      // 表格中选中的数据
      isCheckedList: [],

      // 上传文件列表
      fileList: [],
      // 文件大小判断 需要小于15M 1为符合标准 0为不合标准
      fileSize: 0,

      // 编辑弹窗显隐
      editShow: false,
      // 传给编辑表单的id
      editFormId: '',
      editFormSn: '',
      editFormPoint: '',
    };
  },
  methods: {
    uploadUrl() {
      return window.deviceHost + '/excel/uploadDeviceExcel';
    },
    async getTable() {
      let res = await this.$api.equipment.getUnBinding();
      if (res.status === 200) {
        this.tableData = res.data.data;
      }
    },

    // 表格勾选状态改变
    changeStatus(e) {
      // console.log(e, "changeStatus")
      // 将选中数据处理之后存入变量
      this.isCheckedList = e;
      console.log(this.isCheckedList);
    },
    // 表格行点击事件
    clickRow(row) {
      // 如果当前行是空白，则不作反应
      if (row.length === 0) {
        return;
      }
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    // 指定一个key标识这一行的数据，保持勾选状态
    getRowKey(row) {
      return row.id;
    },
    // 判断当前行是不是空行，是否可点击
    selectInit(row) {
      return row.length !== 0;
    },

    // 编辑操作
    editClick(row) {
      // console.log(row)
      this.editShow = true;
      // 序列号
      this.editFormSn = row.serialId;
      this.editFormId = row.id;
      this.editFormPoint = row.pointId;
    },
    // 用于接收编辑表单的开关值
    showChange(val) {
      // console.log(val)
      this.editShow = val;
    },

    uploadOk() {
      this.uploadShow = false;
      this.$refs.upload.clearFiles();
      // this.$parent.getTable();
      this.getTable();
    },
    uploadCancel() {
      this.uploadShow = false;
      this.$refs.upload.clearFiles();
    },

    // 上传
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      // 自动过滤大小不符合标准的文件
      if (this.fileSize === 0) {
        return true;
      } else {
        return this.$confirm({
          content: `确定移除 ${file.name}`,
          okText: '确定',
          cancelText: '取消'
        });
      }
    },
    // 上传前
    beforeUpload(file) {
      console.log(file);

      // 文件类型限制
      let fileType = file.name.replace(/.+\./, '');
      console.log(fileType);
      if (fileType !== 'xls' && fileType !== 'xlsx') {
        this.$message.warning('仅支持excel文件');
        return false;
      }
      // 文件大小显示 1 符合标准      0 不合标准
      this.fileSize = file.size / 1024 < 15 * 1024 ? 1 : 0;
      // console.log(this.fileSize)
      if (this.fileSize === 0) {
        this.$message.warning('文件需小于15M');
        return false;
      }
    },
    handleSuccess(res, file, fileList) {
      console.log(res);
      // 成功则调用父组件的方法刷新列表
      this.$parent.getTable();


      // 清空上传列表
      // this.$refs.upload.clearFiles()
    },

  },
  mounted() {
    this.getTable();
  },
  components: {
    editForm
  }
};
</script>

<style scoped lang="less">
  @import "~@/assets/css/equipment.less";
</style>
